// tinymce.init({
//   // 你需要将页面中的哪个元素替换成富文本编辑器?
//   selector: 'textarea',
//   height: 300,
//   width: '100%'
// });

// 上述配置，是将多行文本框替换为富文本编辑器
// 已封装到了 ../../assets/lib/tinymce/tinymce_setup.js 里面了,这里直接调用
initEditor();

// --------------------页面处理，获取分类-------------------------
axios.get('/my/category/list').then(res => {
  // console.log(res.data);
  let { status, data } = res.data;
  if (status === 0) {
    let str = '';
    data.forEach(item => {
      str += `<option value="${item.id}">${item.name}</option>`;
    });
    // 把option放到select中
    $('select[name=cate_id]').append(str);  // html()会覆盖select里面的代码
    // 更新渲染 -- lauyi 本身的问题，动态添加的表单元素没有渲染出来，用这种方法让select下面的option可以正常显示
    let form = layui.form;
    form.render('select');

  }
});


// -------------------- 封面处理 - 初始剪裁效果 ----------------------
// 1. 初始化剪裁框
// 1.1 初始化图片裁剪器
let image = $('#image')
// 1.2 裁剪选项
let options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
// 1.3 初始化裁剪区域
image.cropper(options);


// 2. 点击 “选择封面” 能够选择图片
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click');
});

// 3. 图片切换的时候，更换剪裁区的图片
$('#file').on('change', function () {
  if (this.files.length > 0) {
    // 3.1) 找到文件对象
    let fileObj = this.files[0];
    // 3.2) 创建url
    let url = URL.createObjectURL(fileObj);
    // 3.3) 更换图片
    image.cropper('replace', url);
  }
});


// -------------------- 表单提交，收集数据，ajax提交，完成添加 ----------------------
$('form').on('submit', function (e) {
  e.preventDefault();
  // 使用 formdata 收集数据
  let fd = new FormData(this);  // this 就是DOM对象
  // 修改content -- 因为 tinymce 插件把文本域覆盖了,要用特殊的方法获得内容
  fd.set('content', tinyMCE.activeEditor.getContent());

  // 对于图片来说，需要剪裁，剪裁之后，转成文件对象格式，追加到fd中
  let canvas = image.cropper('getCroppedCanvas', {
    width: 400, height: 280
  })
  // 把 canvas 转成文件对象格式
  canvas.toBlob(function (blob) {
    fd.append('cover_img', blob);  // blob对象，追加到fd中之后，就会转成文件对象

    // 检测 fd 中的数据,确认是否取得了接口要求的所有参数
    fd.forEach((item, index) => {
      console.log(index, item);
    })

    // 发送ajax请求，完成最终的添加
    axios.post(`/my/article/add`, fd).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        // 添加成功，跳转到 文章列表 页面
        location.href = './list.html'
      }
    })
  })

});

